<template>
  <div class="flex-col">
    <div class="flex-row justify-center" style="margin: 10px 0">
      <!-- 纸张大小 A3、A4 等 -->
      <!--<div class="paper">
        <template v-for="(value, type) in paperTypes" :key="type">
          <button :class="curPaperType === type ? 'api' : 'info'" @click="setPaper(type, value)">
            {{ type }}
          </button>
        </template>
        &lt;!&ndash; 自定义纸张 &ndash;&gt;
        <button :class="'other' == curPaperType ? 'api' : 'info'" class="auto" @click="showPaperPop">自定义纸张</button>
        <div class="popover">
          <div class="popover-content flex-col" v-show="paperPopVisible">
            <div style="font-size: 16px; font-weight: bold">设置纸张宽高(mm)</div>
            <div class="flex-row mt-10">
              <input class="input" :value="paperWidth" type="number" placeholder="宽(mm)"/>
              <span class="ml-10 mr-10">x</span>
              <input class="input" :value="paperHeight" type="number" placeholder="高(mm)"/>
            </div>
            <button class="primary circle-10" style="margin-top: 6px" @click.stop="setPaperOther">确定</button>
          </div>
        </div>
      </div>-->
      <!-- 缩放 -->
      <!--<div class="flex-row align-center ml-10">
        <button class="info circle-10" @click="changeScale(false)"><i class="iconfont sv-zoom-out"/></button>
        <div style="margin: 0 4px; width: 40px">{{ (scaleValue * 100).toFixed(0) }}%</div>
        <button class="info circle-10" @click="changeScale(true)"><i class="iconfont sv-zoom-in"/></button>
      </div>-->
      <el-button type="primary" round @click.stop="rotatePaper">
        旋转纸张(宽高互换)
      </el-button>
      <el-button type="primary" round @click.stop="clearPaper">
        清空纸张
      </el-button>
      <el-button type="primary" round @click.stop="exportJson">
        导出模板 json
      </el-button>
      <el-button type="primary" round @click.stop="exportJsonTid">
        导出模板 json tid
      </el-button>
      <el-button type="primary" round @click.stop="print">
        浏览器打印
      </el-button>
      <el-button type="primary" round @click.stop="print2">
        直接打印(需要连接客户端)
      </el-button>
    </div>
    <el-row>
      <div class="flex-row" style="margin-top: 20px ">
        <el-col :span="6">
          <div class="title">provider1 默认样式</div>
          <!-- provider1 的容器; 加上 class "rect-printElement-types" 使用默认样式 -->
          <!-- 当然可以 重写 或者 自定义样式 -->
          <div id="provider-container1" class="container rect-printElement-types"></div>
          <div class="title">provider2 自定义样式</div>
          <!-- provider2 的容器; -->
          <!-- 这里自定义显示样式 custom-style-types -->
          <div id="provider-container2" class="container rect-printElement-types"></div>
          <div class=""></div>
        </el-col>
        <el-col :span="12">
          <div class="flex-5 center">
            <!-- 设计器的 容器 -->
            <div id="hiprint-printTemplate"></div>
          </div>
        </el-col>
        <el-col :span="6">
          <!-- 元素参数的 容器 -->
          <div id="PrintElementOptionSetting"></div>
        </el-col>
      </div>

    </el-row>
  </div>
</template>

<script>
import { hiprint } from 'vue-plugin-hiprint'
import { provider1 } from '@/views/dashboard/provider1'
import { provider2 } from '@/views/dashboard/provider2'
import template from '@/views/dashboard/template'
import { newHiprintPrintTemplate } from '@/views/dashboard/template-helper'
import printData from '@/views/dashboard/printData'

export default {
  name: 'Dashboard',
  data() {
    return {
      options: {
        config: {
          tid: 'providerModule1.config',
          title: '参数provider示例',
          type: 'text',
          options: {
            testData: '单据表头',
            height: 30,
            fontSize: 16
          }
        }
      },
      hiprintTemplate: null
    }
  },
  mounted() {
    this.init()
    this.buildLeftElement()
    this.buildDesigner()
  },
  methods: {
    // 初始化 provider
    init() {
      hiprint.init({
        providers: [provider1(this.options), provider2(this.options)]
      })
    },
    // 构建左侧可拖拽区域
    buildLeftElement() {
      // ----- providerModule1 -----
      // eslint-disable-next-line no-undef
      $('#provider-container1').empty() // 先清空, 避免重复构建
      // eslint-disable-next-line no-undef
      hiprint.PrintElementTypeManager.build($('#provider-container1'), 'providerModule1')
      // ----- providerModule2 -----
      // eslint-disable-next-line no-undef
      $('#provider-container2').empty() // 先清空, 避免重复构建
      // eslint-disable-next-line no-undef
      hiprint.PrintElementTypeManager.build($('#provider-container2'), 'providerModule2')
    },
    // 构建容器
    buildDesigner() {
      // eslint-disable-next-line no-undef
      $('#hiprint-printTemplate').empty()// 先清空, 避免重复构建
      // 注意事项: 模板json(object)
      // 如果使用vue  ref创建的模板json, 需要使用 .value 获取 (确保内部能够使用 object.key 拿到对应数据就行)
      this.hiprintTemplate = newHiprintPrintTemplate('zhangsan', {
        template: template, // 模板json(object)
        settingContainer: '#PrintElementOptionSetting' // 元素参数容器
      })
      // 构建 并填充到 容器中
      this.hiprintTemplate.design('#hiprint-printTemplate')
      console.log('1', this.hiprintTemplate)
    },
    rotatePaper() {
      this.hiprintTemplate.rotatePaper()
    },
    clearPaper() {
      this.hiprintTemplate.clear()
    },
    /**
     * 导出模板 json
     * 必须确保 hiprintTemplate 已成功创建
     */
    exportJson() {
      const json = this.hiprintTemplate.getJson()
      console.log('json', json)
      alert('导出成功! 请查看控制台输出')
    },
    exportJsonTid() {
      const jsonTid = this.hiprintTemplate.getJsonTid()
      console.log('jsonTid', jsonTid)
      alert('导出成功! 请查看控制台输出')
    },
    /**
     * 浏览器打印
     */
    print() {
      // 参数: 打印时设置 左偏移量，上偏移量
      const options = { leftOffset: -1, topOffset: -1 }
      // 扩展
      const ext = {
        callback: () => {
          console.log('浏览器打印窗口已打开')
        },
        styleHandler: () => {
          // 重写 文本 打印样式
          return '<style>.hiprint-printElement-text{color:red !important;}</style>'
        }
      }
      // 调用浏览器打印
      this.hiprintTemplate.print(printData, options, ext)
    },
    /**
     * 直接打印: 借助客户端,静默打印(无弹窗直接打印)
     * 注意: 需要先连接客户端
     */
    print2() {
      if (hiprint.hiwebSocket.opened) {
        this.hiprintTemplate.print2(printData)
      } else {
        alert('请先连接客户端(刷新网页), 然后再点击「直接打印」')
      }
    }
  }

}
</script>
<style>
.flex-row{
  display: flex;
  justify-content: center;
}
</style>
